<template>
  <div class="game">
    <el-form inline>
      <el-form-item>
        <el-select v-model="params.heroType" clearable placeholder="英雄类型">
          <el-option
            v-for="(item,key) of options"
            :key="key"
            :label="item"
            :value="key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="英雄名称" v-model="params.keyword"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getlist">
          查询
        </el-button>
        <el-button @click="reset">
          重置
        </el-button>
        <el-button @click="add">
          新增英雄
        </el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="8" :key="i.id" v-for="i in tableData">
        <el-card :body-style="{ padding: '0px' }" s>
          <div style="padding: 15px;">
            <img :src="i.heroImg" alt="" style="height: 100px">
            <div class="bottom clearfix">
              <div>
                {{ i.heroName }}
              </div>
              <div style="width: 100px;">
                {{ options[i.heroType] }}
              </div>
              <div style="height: 50px;">
                {{ i.skill }}
              </div>
              <el-button type="danger" @click="del(i)">删除</el-button>
              <el-button type="danger" @click="edit(i)">编辑</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-table-->
    <!--        :data="tableData"-->
    <!--        border-->
    <!--        style="width: 100%">-->
    <!--      <el-table-column type="index" width="50"/>-->
    <!--      <el-table-column prop="id" label="id" width="50"/>-->
    <!--      <el-table-column prop="heroName" label="英雄名称" width="100"/>-->
    <!--      <el-table-column prop="heroType" label="英雄类型" width="100">-->
    <!--        <template slot-scope="scope">-->
    <!--          {{options[scope.row.heroType]}}-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="heroImg" label="头像" width="100">-->
    <!--      <template slot-scope="scope">-->
    <!--        <img width="88px" :src="scope.row.heroImg" alt="">-->
    <!--      </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="nickName" label="别称" width="100"/>-->
    <!--      <el-table-column prop="skill" label="技能" width="100"/>-->
    <!--      <el-table-column prop="hardGrade" label="难度等级" width="100"/>-->
    <!--      <el-table-column prop="skillGrade" label="技能等级" width="100"/>-->
    <!--      <el-table-column prop="attackGrade" label="攻击等级" width="100"/>-->
    <!--      <el-table-column prop="subsistGrade" label="生存等级" width="100"/>-->
    <!--      <el-table-column prop="background" label="背景图" width="100"/>-->
    <!--      <el-table-column prop="skinList" label="皮肤" width="100"/>-->
    <!--      <el-table-column prop="content" label="描述内容" width="100"/>-->
    <!--      <el-table-column prop="content" label="操作" min-width="150">-->
    <!--&lt;!&ndash;           <template slot-scope="scope">&ndash;&gt;{heroname:zhaoyun,img:xxx}-->
    <!--         <el-button type="danger" @click="del(scope.row.id)">删除</el-button>-->
    <!--         <el-button type="danger" @click="edit(scope.row)">编辑</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <Add ref="add" @update="getlist"/>
  </div>

</template>

<script>
import { Del, getList } from '@/api/hero'
import Add from './add'

export default {
  components: {
    Add
  },
  name: "index",
  data() {
    return {
      tableData: [],
      options: {
        1: '刺客',
        2: '法师',
        3: '坦克',
        4: '战士',
        5: '射手',
        6: '辅助',
        7: '刺客/战士',
        8: '刺客/法师',
        9: '坦克/战士',
        10: '坦克/法师'
      },
      form: {},
      rules: {
        name: [{
          message: '*必填项',
          required: true,
          trigger: ['change', 'blur']
        }]
      },
      params: {
        heroType: null,
        keyword: ''
      }
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      getList({
        ...this.params,
        size: 9999
      }).then(res => {
        this.tableData = res.data.data
      })
    },
    reset() {
      Object.keys(this.params).forEach(key => {
        this.params[key] = null
      })
      this.getlist()
    },
    add() {
      this.$refs.add.handleOpen()
    },
    del(row) {
      Del({ id: row.id }).then(res => {
        if (res.data.success) {
          this.getlist()
        }
      })
    },
    edit(row) {
      this.$refs.add.handleOpen(row)
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
